<template>
  <div class="info">
    <p class="title">编辑个人资料</p>
    <hr/>
    <div class="personal">
      <div style="text-align: center; margin-bottom: 10px">
        <!--            <img v-if="imageUrl" width="80px" height="80px" style="border-radius: 40px"-->
        <!--                 src="https://jianzhi-backet.oss-cn-shenzhen.aliyuncs.com/111/1611987793378.jpg"/>-->
        <!--            <img v-else width="80px" height="80px" style="border-radius: 40px"/>-->
        <img 
          width="80px" 
          height="80px" 
          :src="imageUrl"
          @error="handleImageError"
          style="object-fit: cover; border-radius: 40px;"
        >
        <div style="margin: 10px">
          <!-- 删除原来的 el-upload 组件，改用按钮触发对话框 -->
          <el-button 
            size="small" 
            type="primary" 
            @click="$emit('show-url-dialog')"
          >
            更改头像
          </el-button>
        </div>
      </div>




      <el-form :model="basicData" class="demo-ruleForm" label-width="80px" :disabled="!isEditing">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="basicData.username" placeholder="用户名" disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNum" label="学校">
          <el-input  placeholder="学校" v-model="basicData.schoolName" disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNum" label="学号">
          <el-input  placeholder="学号" v-model="basicData.sno" :readonly="!isEditing"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNum" label="姓名">
          <el-input  placeholder="姓名" v-model="basicData.name" :readonly="!isEditing"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNum" label="年级">
          <el-input  placeholder="年级" v-model="basicData.grade" :readonly="!isEditing"></el-input>
        </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="basicData.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
      
        <el-form-item prop="phoneNum" label="手机">
          <el-input  placeholder="手机" v-model="basicData.phone" ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="basicData.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="basicData.age" type="number" :readonly="!isEditing"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="goback" style="float:right;margin-right: 5px">返回</el-button>
<!--    <div class="btn">-->
<!--      <div >保存</div>-->
<!--      <div >取消</div>-->
<!--    </div>-->
    </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { cities } from '../../../assets/data/form'
import {submitUpload,fileDownLoad} from '@/utils/ossCommonMethods'
// import { updateUserMsg, getUserOfId } from './index'


export default {
  name: 'info',
  props: {
    isEditing: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      cities: [],
      basicData: {},
      imageUrl: '', // 移除默认值，将由queryUnitImag方法设置
      fileList: [],
      defaultAvatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.Uoz1-5uTFTJ7s8fymTUhYgAAAA?rs=1&pid=ImgDetMain'
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  created () {
    this.cities = cities
    this.queryData()
    var element = document.createElement("script");
    element.src = "http://gosspublic.alicdn.com/aliyun-oss-sdk-6.12.0.min.js";
    document.body.appendChild(element);
  },
  mounted () {
    // this.getMsg(this.userId)
    this.queryData()
  },
  methods: {
    queryData(){
      this.$axios.post("/jobSeeker/getOne",{}).then(res=>{
        if (res.code == 200){
          this.basicData = res.data
          this.queryUnitImag()
        }
      })
    },
    saveChanges(){
      this.$axios.post("/jobSeeker/edit",this.basicData).then(res=>{
        if (res.code == 200){
          this.$message.success("操作成功");
          this.queryData();
        }else {
          this.$message.error("操作失败");
        }
      })
    },
    getMsg (id) {
    },
    goback () {
      this.$router.go(-1)
    },
    saveMsg () {
      let d = new Date(this.registerForm.birth)
      let datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      let params = new URLSearchParams()
      params.append('id', this.userId)
      params.append('username', this.registerForm.username)
      params.append('password', this.registerForm.password)
      params.append('sex', this.registerForm.sex)
      params.append('phone_num', this.registerForm.phoneNum)
      params.append('email', this.registerForm.email)
      params.append('birth', datetime)
      params.append('introduction', this.registerForm.introduction)
      params.append('location', this.registerForm.location)
      // updateUserMsg(params)
      //   .then(res => {
      //     if (res.code === 1) {
      //       this.showError = false
      //       this.showSuccess = true
      //       this.$store.commit('setUsername', this.registerForm.username)
      //       this.$notify.success({
      //         title: '编辑成功',
      //         showClose: true
      //       })
      //       setTimeout(function () {
      //         this.$router.go(-1)
      //       }, 2000)
      //     } else {
      //       this.showSuccess = false
      //       this.showError = true
      //       this.$notify.error({
      //         title: '编辑失败',
      //         showClose: true
      //       })
      //     }
      //   })
      //   .catch(err => {
      //     console.log(err)
      //   })
    },
    // 移除不需要的上传相关方法
    handlePreview() {},
    changelist() {},
    handleRemove() {},
    submitUpload() {},
    
    queryUnitImag(){
      this.$axios.post("/imageInfo/getOne", {
        jobSeekerId: this.basicData.id
      }).then(res => {
        if (res.code == 200){
          console.log('图片URL:', res.data.url);
          this.imageUrl = res.data.url;
        } else {
          this.imageUrl = "";
          console.log('获取图片失败:', res);
        }
      }).catch(err => {
        console.error('请求失败:', err);
      })
    },
    
    handleImageError(e) {
      console.error('图片加载失败:', e);
      e.target.src = this.defaultAvatar;
    }
  }
}
</script>

<style lang="scss" scoped>
@use 'src/assets/stycle-zhou/info';
</style>
